<template>
  <div class="product">
    <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        title="综合"
        @open="openBug"
        @close="closeBug"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        title="价格"
        @open="openBug"
        @close="closeBug"
      />
      <van-dropdown-item
        v-model="value3"
        :options="$store.state.option3"
        @change="itemChangeFn"
        @open="openBug"
        @close="closeBug"
        :style="this.$store.state.isClose ? {overflowY:'hidden'} : ''"
      />
    </van-dropdown-menu>
    <section v-if="$store.state.productArr.length>0">
      <product-show v-for="(obj, index) in $store.state.productArr" :key="index" :obj="obj"></product-show>
    </section>
    <div class="nothing" v-else>
      <van-icon name="comment-o" />
      <p>您寻找的商品还未上架</p>
    </div>
  </div>
</template>

<script>
import ProductShow from "@/components/ProductShow";
export default {
  props: ["value"],
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [{ text: "综合", value: 0 }],
      option2: [
        { text: "价格由高到低", value: 0 },
        { text: "价格由低到高", value: 1 }
      ]
    };
  },
  components: {
    ProductShow
  },
  methods: {
    openBug() {
      this.$store.commit("changeBug", true);
    },
    closeBug() {
      this.$store.commit("changeBug", false);
    },
    itemChangeFn(value) {
      this.value3 = value;
      // 重新排序
      this.$store.dispatch("AsyncChangeProductArr", {
        keyword: this.value,
        categoryId: value
      });
    }
  }
};
</script>

<style lang="less" scoped>
.product {
  section {
    padding: 5px 2%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .nothing {
    text-align: center;
    color: #666;
    padding-top: 30vh;
    .van-icon {
      font-size: 60px;
    }
  }
}
</style>